<script setup>
import { ref, watch, computed, onUnmounted } from 'vue'
import PageContainer from '@/components/PageContainer.vue'
import {
  ArrowRight,
  Delete,
  Plus,
  User,
  ArrowDown
} from '@element-plus/icons-vue'
import { baseURL } from '@/utils/request'
import { userGetMdStrService } from '@/api/user'
import {
  adminGetPotExpertListService,
  adminDeletePotExpertService,
  adminGetPotExpertDetailService,
  adminAgreePotExpertService,
  adminUpdatePotInfoMdService
} from '@/api/admin'
import { aiRecommendExpertService } from '@/api/ai'
import RegisterPage from '@/components/RegisterPage.vue'
//获取专家列表
const choosePage = ref({
  page: 1,
  size: 16,
  organization: '',
  research: ''
})
// 新增：用于存储后端返回的专家数据和总数
const expertsList = ref([])
const total = ref(0)
const expertDetail = ref({})

const getExpertList = async () => {
  const {
    data: { data }
  } = await adminGetPotExpertListService(choosePage.value)
  expertsList.value = data.records
  total.value = data.total
}

getExpertList()

//获取意向专家详情信息
const getExpertDetail = async (id) => {
  const {
    data: { data }
  } = await adminGetPotExpertDetailService(id)
  expertDetail.value = data
  form.value = { ...expertDetail.value }
  avatarPreview.value = baseURL + '/' + (expertDetail.value.picUrl || '')
  avatarDefault.value = baseURL + '/' + (expertDetail.value.picUrl || '')
  text.value = expertDetail.value.markdownContent || ''
}

// 分页事件处理函数
const handleSizeChange = (val) => {
  //分页事件逻辑
}

const handleCurrentChange = (newPage) => {
  choosePage.value.page = newPage
  getExpertList()
}

// 删除专家处理函数
const handleDeleteExpert = async (userId) => {
  ElMessageBox.confirm('您确定要删除吗？', '确认删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const success = await adminDeletePotExpertService(userId)
      if (success) {
        ElMessage.success('删除成功')
        // 找到当前专家在列表中的索引
        const idx = expertsList.value.findIndex((e) => e.userId === userId)
        await getExpertList()
        // 删除后自动选中下一个或上一个专家
        if (isDetailView.value) {
          if (expertsList.value.length === 0) {
            // 没有专家了，关闭详情页
            isDetailView.value = false
            selectedExpert.value = null
          } else {
            let nextIdx = idx
            if (nextIdx >= expertsList.value.length) {
              nextIdx = expertsList.value.length - 1
            }
            const nextExpert = expertsList.value[nextIdx]
            if (nextExpert) {
              await handleCardClick(nextExpert)
            } else {
              isDetailView.value = false
              selectedExpert.value = null
            }
          }
        }
      } else {
        ElMessage.error('删除失败')
      }
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}

// 控制详情视图状态
const isDetailView = ref(false)
const selectedExpert = ref(null)

// 拖拽调整大小相关
const leftPanelWidth = ref(50) // 左侧面板宽度百分比
const isDragging = ref(false)
const minLeftWidth = 14 // 最小宽度14%，保证头像、名字、职位学历完整显示
const maxLeftWidth = 65 // 最大宽度65%，当超过65%时按钮会隐藏

// 控制按钮显示的响应式变量
const showActionButtons = computed(() => {
  // 详细区域宽度 = 100% - 左侧面板宽度
  const detailWidth = 100 - leftPanelWidth.value

  // 当详细区域宽度小于40%时隐藏按钮
  return detailWidth >= 40
})

// 恢复正常布局
const handleRestore = () => {
  isDetailView.value = false
  selectedExpert.value = null
  leftPanelWidth.value = 50 // 重置宽度
}

// 开始拖拽
const startDrag = (e) => {
  isDragging.value = true
  document.addEventListener('mousemove', handleDrag)
  document.addEventListener('mouseup', stopDrag)
  e.preventDefault()
}

// 处理拖拽
const handleDrag = (e) => {
  if (!isDragging.value) return

  const container = document.querySelector('.detail-container')
  if (!container) return

  const rect = container.getBoundingClientRect()
  const x = e.clientX - rect.left
  const percentage = (x / rect.width) * 100

  // 限制在最小和最大宽度之间
  if (percentage >= minLeftWidth && percentage <= maxLeftWidth) {
    leftPanelWidth.value = percentage
  }
}

// 停止拖拽
const stopDrag = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', handleDrag)
  document.removeEventListener('mouseup', stopDrag)
}

// 根据左侧面板宽度计算卡片列数
const getCardColumns = () => {
  if (leftPanelWidth.value <= 35) return 1 // 一行1个
  if (leftPanelWidth.value <= 50) return 2 // 一行2个
  return 3 // 一行3个
}

// 右侧详细内容区域表单相关
const form = ref({})
const avatarPreview = ref('')
const avatarDefault = ref('')
const text = ref('')
const formRef = ref()
// MD编辑器引用
const isMdLoading = ref(true)
let timer = null
// 定义isUpload变量
const isUpload = ref(true)
// 点击卡片进入详情视图
const handleCardClick = async (expert) => {
  selectedExpert.value = expert
  isDetailView.value = true
  getExpertDetail(expert.userId)
  // 启动定时器（只启动一次）
  if (!timer) {
    timer = setInterval(() => {
      handleCardClick(selectedExpert.value)
    }, 5000)
  }
}

watch(
  () => form.value.markdownContent,
  (newVal) => {
    //情况一：用户未选择文件
    if (newVal === 'unselected') {
      isMdLoading.value = false
      clearInterval(timer)
      timer = null
      isUpload.value = false
    }
    //情况二：用户选择文件且上传完成
    else if (newVal) {
      isUpload.value = true
      isMdLoading.value = false
      clearInterval(timer)
      timer = null
    }
    //情况三：用户选择文件且上传中
    else {
      isUpload.value = false
      isMdLoading.value = true
    }
  },
  { immediate: true }
)

//注册时自动重置数据并且渲染数据
const showDrawer = ref(null)
const registerRefs = ref(null)
watch(
  () => showDrawer.value,
  (newVal) => {
    if (!newVal) {
      //重置数据
      registerRefs.value.initForm()
      //渲染数据
      getExpertList()
    }
  }
)

const showRecommendDrawer = ref(false)

//退出页面清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})

//管理员上传MD文件
function beforeMdFileUpload(file) {
  // 常见文本文件扩展名
  const textExts = [
    '.txt',
    '.md',
    '.json',
    '.csv',
    '.log',
    '.xml',
    '.yaml',
    '.yml',
    '.ini',
    '.conf',
    '.py',
    '.js',
    '.ts',
    '.java',
    '.c',
    '.cpp',
    '.h',
    '.css',
    '.scss',
    '.less',
    '.html',
    '.vue'
  ]
  const lowerName = file.name.toLowerCase()
  const isText = textExts.some((ext) => lowerName.endsWith(ext))
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isText) {
    ElMessage.error('只能上传常见文本文件!')
  }
  if (!isLt2M) {
    ElMessage.error('上传文件大小不能超过 2MB!')
  }
  return isText && isLt2M
}
const handleMdFileChange = async (file) => {
  isMdLoading.value = true
  form.value.markdownContent = ''
  //防止管理员在更新时切屏
  await adminUpdatePotInfoMdService(
    form.value.userId,
    form.value.markdownContent
  )
  const FD = new FormData()
  FD.append('file', file.raw)
  await userGetMdStrService(FD, form.value.userId, 'INTERNATIONAL_EXPERT')
  await getExpertDetail(form.value.userId)
  isMdLoading.value = false
}

// 推荐专家表单数据
const recommendForm = ref({
  username: null,
  age: null,
  gender: null,
  nationality: null,
  professional: null,
  organization: null,
  academic: null,
  research: null,
  number: 1,
  describe: null
})

const recommendFormRef = ref()
const recommendRules = {
  username: [{ required: false, message: '请输入专家名字', trigger: 'blur' }],
  age: [
    { required: false, message: '请输入年龄', trigger: 'blur' },
    {
      type: 'number',
      min: 18,
      max: 100,
      message: '年龄需在18-100之间',
      trigger: 'blur'
    }
  ],
  gender: [{ required: false, message: '请选择性别', trigger: 'change' }],
  nationality: [{ required: false, message: '请输入民族', trigger: 'blur' }],
  professional: [{ required: false, message: '请选择职称', trigger: 'change' }],
  organization: [{ required: false, message: '请输入机构', trigger: 'blur' }],
  academic: [{ required: false, message: '请选择最高学历', trigger: 'change' }],
  research: [{ required: false, message: '请输入研究领域', trigger: 'blur' }],
  number: [
    { required: false, message: '请输入专家数量', trigger: 'blur' },
    {
      type: 'number',
      min: 1,
      max: 50,
      message: '专家数量需在1-50之间',
      trigger: 'blur'
    }
  ],
  describe: [{ required: false, message: '请输入描述信息', trigger: 'blur' }]
}

const onShowRecommendDrawer = () => {
  showRecommendDrawer.value = true
  recommendForm.value = {
    username: null,
    age: null,
    gender: null,
    nationality: null,
    professional: null,
    organization: null,
    academic: null,
    research: null,
    number: 1,
    describe: null
  }
}

const respond = ref('')
const isRegloading = ref(false)
// 提交推荐表单
const submitRecommendForm = async () => {
  await recommendFormRef.value.validate()
  // 后台执行API调用
  respond.value = aiRecommendExpertService(recommendForm.value)

  // 显示提示弹窗
  ElMessageBox.alert('AI正在搜寻信息寻找推荐，请稍等片刻', '提示', {
    confirmButtonText: '确定',
    type: 'info',
    showCancelButton: false,
    callback: () => {
      // 立即关闭抽屉并清空表单
      showRecommendDrawer.value = false
      isRegloading.value = true
    }
  })
}
watch(respond, (newData) => {
  if (newData) {
    getExpertList()
    isRegloading.value = false
  }
})
//同意意向专家入库
const handleAgree = async () => {
  await adminAgreePotExpertService(selectedExpert.value.userId)
}

//改变文档
const changeMdContent = (newData) => {
  if (newData) getExpertList()
}
</script>

<template>
  <PageContainer title="意向专家">
    <template #extra>
      <div>
        <el-button type="primary" @click="onShowRecommendDrawer">
          <el-icon><Plus /></el-icon>
          推荐意向专家
        </el-button>
        <el-button type="primary" @click="showDrawer = true">
          <el-icon><Plus /></el-icon>
          添加意向专家
        </el-button>
      </div>
    </template>
    <el-scrollbar
      height="calc(100vh - 280px)"
      v-loading="isRegloading"
      element-loading-text="AI正在处理您的推荐,请稍等..."
    >
      <!-- 正常布局 -->
      <div v-show="!isDetailView" class="experts-container">
        <el-row>
          <el-col
            v-for="expert in expertsList"
            :key="expert.userId"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="6"
            class="expert-col"
          >
            <el-card
              class="expert-card"
              shadow="hover"
              @click="handleCardClick(expert)"
            >
              <div class="expert-content">
                <div class="expert-avatar">
                  <img
                    :src="baseURL + '/' + expert.picUrl"
                    :alt="expert.username"
                    class="avatar-img"
                  />
                </div>
                <div class="expert-info">
                  <div class="expert-name">{{ expert.username }}</div>
                  <div class="expert-title">
                    {{ expert.professional }} | {{ expert.academic }}
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 详情布局 -->
      <div v-show="isDetailView" class="detail-container">
        <div class="left-panel" :style="{ width: leftPanelWidth + '%' }">
          <el-scrollbar height="calc(100vh - 280px)">
            <div class="experts-container">
              <el-row>
                <el-col
                  v-for="expert in expertsList"
                  :key="expert.userId"
                  :span="24 / getCardColumns()"
                  class="expert-col"
                >
                  <el-card
                    class="expert-card"
                    shadow="hover"
                    @click="handleCardClick(expert)"
                    :class="{
                      selected:
                        selectedExpert &&
                        selectedExpert.userId === expert.userId
                    }"
                  >
                    <div class="expert-content">
                      <div class="expert-avatar">
                        <img
                          :src="baseURL + '/' + expert.picUrl"
                          :alt="expert.username"
                          class="avatar-img"
                        />
                      </div>
                      <div class="expert-info">
                        <div class="expert-name">{{ expert.username }}</div>
                        <div class="expert-title">
                          {{ expert.professional }} | {{ expert.academic }}
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-scrollbar>
        </div>

        <!-- 拖拽条 -->
        <div
          class="drag-handle"
          @mousedown="startDrag"
          :class="{ dragging: isDragging }"
          :style="{ left: leftPanelWidth - 0.8 + '%' }"
        >
          <el-icon><ArrowRight /></el-icon>
        </div>

        <div class="right-panel" :style="{ width: 100 - leftPanelWidth + '%' }">
          <el-scrollbar height="calc(100vh - 320px)">
            <div style="padding: 20px">
              <!-- 头像卡片 -->
              <el-card
                class="avatar-card"
                shadow="hover"
                style="height: 210px; position: relative"
              >
                <div
                  style="
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                  "
                >
                  <div
                    style="
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                    "
                  >
                    <div class="avatar-container">
                      <div class="avatar-wrapper">
                        <img
                          v-if="avatarDefault"
                          :src="avatarDefault"
                          class="avatar-img"
                        />
                        <div v-else class="avatar-placeholder">
                          <el-icon><User /></el-icon>
                        </div>
                      </div>
                    </div>
                    <el-upload
                      class="avatar-uploader"
                      :show-file-list="false"
                      :auto-upload="false"
                      style="margin-top: 18px"
                    >
                    </el-upload>
                  </div>
                </div>
                <div
                  v-show="showActionButtons"
                  class="hidden-xs-only hidden-sm-only"
                  style="
                    position: absolute;
                    top: 20px;
                    right: 30px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    width: 20%;
                    min-width: 100px;
                    max-width: 180px;
                  "
                >
                  <el-button
                    type="primary"
                    @click="handleRestore"
                    class="restore-btn"
                    style="width: 100%"
                    >恢复布局</el-button
                  >
                  <el-button
                    type="primary"
                    @click="handleAgree"
                    class="restore-btn"
                    style="width: 100%"
                    >同意入库</el-button
                  >
                  <el-dropdown style="width: 100%">
                    <el-button
                      type="primary"
                      class="restore-btn"
                      style="width: 100%"
                    >
                      更多操作
                      <el-icon class="el-icon--right">
                        <ArrowDown />
                      </el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          @click="handleDeleteExpert(form.userId)"
                        >
                          <el-icon><Delete /></el-icon>
                          删除意向专家
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </el-card>
              <!-- 基本信息卡片 -->
              <el-card class="info-card" shadow="hover">
                <template #header>
                  <div class="card-header">
                    <el-icon><User /></el-icon>
                    <span class="skyColor">基本信息</span>
                  </div>
                </template>
                <el-form ref="formRef" label-width="0px" class="info-form">
                  <div class="form-row">
                    <el-form-item label="ID" label-position="top">
                      <el-input
                        v-model="form.userId"
                        disabled
                        class="input-style"
                      />
                    </el-form-item>
                    <el-form-item label="姓名" label-position="top">
                      <el-input v-model="form.username" class="input-style" />
                    </el-form-item>
                    <el-form-item label="年龄" label-position="top">
                      <el-input-number
                        v-model="form.age"
                        :min="18"
                        :max="100"
                        class="input-style"
                      />
                    </el-form-item>
                    <el-form-item label="性别" label-position="top">
                      <el-select
                        v-model="form.gender"
                        placeholder="请选择性别"
                        class="input-style"
                      >
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="form-row">
                    <el-form-item label="民族" label-position="top">
                      <el-input
                        v-model="form.nationality"
                        class="input-style"
                      />
                    </el-form-item>
                    <el-form-item label="职称" label-position="top">
                      <el-select
                        v-model="form.professional"
                        placeholder="请选择职称"
                        class="input-style"
                      >
                        <el-option label="教授" value="教授" />
                        <el-option label="副教授" value="副教授" />
                        <el-option label="讲师" value="讲师" />
                        <el-option label="助教" value="助教" />
                        <el-option label="研究生导师" value="研究生导师" />
                        <el-option label="其他" value="其他" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="学院" label-position="top">
                      <el-input
                        v-model="form.organization"
                        class="input-style"
                      />
                    </el-form-item>
                    <el-form-item label="最高学历" label-position="top">
                      <el-select
                        v-model="form.academic"
                        placeholder="请选择最高学历"
                        class="input-style"
                      >
                        <el-option label="博士" value="博士" />
                        <el-option label="硕士" value="硕士" />
                        <el-option label="学士" value="学士" />
                        <el-option label="其他" value="其他" />
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="form-row">
                    <el-form-item label="研究领域" label-position="top">
                      <el-input v-model="form.research" class="input-style" />
                    </el-form-item>
                    <el-form-item label="邮箱" label-position="top">
                      <el-input v-model="form.email" class="input-style" />
                    </el-form-item>
                  </div>
                </el-form>
              </el-card>
              <el-card
                v-if="isUpload"
                class="info-card"
                shadow="hover"
                v-loading="isMdLoading"
                element-loading-text="AI正在处理您的研究领域,请稍等..."
              >
                <template #header>
                  <div class="card-header">
                    <el-icon><User /></el-icon>
                    <span class="skyColor">研究领域</span>
                  </div>
                </template>
                <MdEditor
                  v-model:MdContent="form.markdownContent"
                  v-model:userId="form.userId"
                  type="1"
                  @changeMdcontent="changeMdContent"
                />
              </el-card>
              <el-card
                v-else
                class="info-card"
                shadow="hover"
                v-loading="isMdLoading"
                element-loading-text="AI正在处理您的研究领域,请稍等..."
              >
                <template #header>
                  <div class="card-header">
                    <el-icon><User /></el-icon>
                    <span class="skyColor">研究领域</span>
                  </div>
                </template>
                <el-empty>
                  <el-upload
                    class="md-uploader"
                    :show-file-list="false"
                    :before-upload="beforeMdFileUpload"
                    :on-change="handleMdFileChange"
                    :auto-upload="false"
                  >
                    <el-button type="primary" class="md-upload-btn">
                      上传MD文件
                    </el-button>
                  </el-upload>
                </el-empty>
              </el-card>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </el-scrollbar>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="choosePage.page"
        v-model:page-size="choosePage.size"
        :page-sizes="[16]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        hide-on-single-page
      />
    </div>
  </PageContainer>
  <el-drawer v-model="showDrawer" title="添加意向专家" size="50%">
    <RegisterPage
      height="100%"
      v-model:showDrawer="showDrawer"
      isPotExpert="true"
      ref="registerRefs"
    ></RegisterPage>
  </el-drawer>

  <!-- 推荐意向专家抽屉 -->
  <el-drawer v-model="showRecommendDrawer" title="推荐意向专家" size="70%">
    <div style="padding: 20px">
      <el-form
        ref="recommendFormRef"
        :model="recommendForm"
        :rules="recommendRules"
        label-width="120px"
        class="recommend-form"
      >
        <div class="form-section">
          <h3>基本信息</h3>
          <div class="form-grid">
            <el-form-item label="专家名字" prop="username">
              <el-input
                v-model="recommendForm.username"
                placeholder="请输入专家名字"
              />
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input-number
                v-model="recommendForm.age"
                :min="18"
                :max="100"
                placeholder="请输入年龄"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select
                v-model="recommendForm.gender"
                placeholder="请选择性别"
                style="width: 100%"
              >
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
            <el-form-item label="民族" prop="nationality">
              <el-input
                v-model="recommendForm.nationality"
                placeholder="请输入民族"
              />
            </el-form-item>
            <el-form-item label="职称" prop="professional">
              <el-select
                v-model="recommendForm.professional"
                placeholder="请选择职称"
                style="width: 100%"
              >
                <el-option label="教授" value="教授" />
                <el-option label="副教授" value="副教授" />
                <el-option label="讲师" value="讲师" />
                <el-option label="助教" value="助教" />
                <el-option label="研究生导师" value="研究生导师" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
            <el-form-item label="机构" prop="organization">
              <el-input
                v-model="recommendForm.organization"
                placeholder="请输入机构"
              />
            </el-form-item>
            <el-form-item label="最高学历" prop="academic">
              <el-select
                v-model="recommendForm.academic"
                placeholder="请选择最高学历"
                style="width: 100%"
              >
                <el-option label="博士" value="博士" />
                <el-option label="硕士" value="硕士" />
                <el-option label="学士" value="学士" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
            <el-form-item label="研究领域" prop="research">
              <el-input
                v-model="recommendForm.research"
                placeholder="请输入研究领域"
              />
            </el-form-item>
            <el-form-item label="专家数量" prop="number">
              <el-input-number
                v-model="recommendForm.number"
                :min="1"
                :max="50"
                placeholder="请输入专家数量"
                style="width: 100%"
              />
            </el-form-item>
          </div>
        </div>

        <div class="form-section">
          <h3>描述信息</h3>
          <el-form-item label="描述信息" prop="describe">
            <el-input
              v-model="recommendForm.describe"
              type="textarea"
              :rows="4"
              placeholder="请详细描述您需要的专家特征和要求..."
            />
          </el-form-item>
        </div>

        <div class="form-actions">
          <el-button @click="showRecommendDrawer = false">取消</el-button>
          <el-button type="primary" @click="submitRecommendForm"
            >提交描述</el-button
          >
        </div>
      </el-form>
    </div>
  </el-drawer>
</template>

<style scoped lang="less">
.experts-container {
  padding: 10px 0;
  width: 100%;
  box-sizing: border-box;
}

.expert-col {
  margin-bottom: 16px;
}

.expert-card {
  // 计算高度：calc((100vh - 280px - 16px*3 - 20px*2)/4)
  // 280px为PageContainer、分页组件和外部padding，16px*3为3个间隔，20px*2为上下padding
  height: calc((100vh - 280px - 48px - 40px) / 4);
  min-height: 120px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  margin: 0 10px 0 0;
  cursor: pointer;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  &.selected {
    border: 2px solid #409eff;
    box-shadow: 0 0 8px rgba(64, 158, 255, 0.3);
  }
}

.expert-content {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 8px;
}

.expert-avatar {
  width: 60px;
  height: 60px;
  margin-right: 12px;
  flex-shrink: 0;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e4e7ed;
}

.expert-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.expert-name {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 6px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expert-title {
  font-size: 13px;
  color: #606266;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 详情布局样式
.detail-container {
  display: flex;
  height: 100%;
  position: relative;
}

.left-panel {
  /* transition: width 0.1s ease; */
  padding-right: 10px;
}

.right-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  /* transition: width 0.1s ease; */
  height: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* 让el-scrollbar和内容自适应父容器 */
.right-panel > .el-scrollbar {
  height: 100% !important;
  width: 100% !important;
  min-width: 0;
}
.right-panel > .el-scrollbar > div {
  height: 100%;
  min-width: 0;
}
/* 让详细内容卡片自适应 */
.right-panel .avatar-card,
.right-panel .info-card,
.right-panel .el-card {
  width: 100%;
  box-sizing: border-box;
}

.delete-btn-container {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
}

// 拖拽条样式
.drag-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 60px;
  background: #409eff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  z-index: 1000;
  transition: background-color 0.2s ease;

  .el-icon {
    color: white;
    font-size: 12px;
  }

  &:hover {
    background: #66b1ff;
  }

  &.dragging {
    background: #337ecc;
  }
}

.restore-btn {
  font-size: 16px;
  padding: 12px 24px;
  margin-left: 0;
}

// 分页容器样式
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  background-color: #fff;
  border-top: 1px solid #e4e7ed;
  margin-top: 10px;
}

// 响应式断点说明：
// xs: < 768px (手机) - 一行1个
// sm: >= 768px (平板) - 一行2个
// md: >= 992px (小屏电脑) - 一行3个
// lg: >= 1200px (大屏电脑) - 一行4个
// xl: >= 1920px (超大屏) - 一行4个

.main1 {
  padding: 20px;
}

.avatar-card {
  margin-bottom: 20px;
}

.avatar-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px;
  gap: 60px;
}

.avatar-container {
  display: flex;
  align-items: center;
}

.avatar-wrapper {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 48px;
}

.upload-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.upload-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}

.info-card {
  margin-bottom: 20px;
  overflow-x: auto;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.info-form {
  padding: 20px 0;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.form-row:last-child {
  margin-bottom: 0;
}

.input-style {
  width: 100%;
  min-width: 0;
}

/deep/ .el-form-item__label {
  color: #999;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 4px;
  line-height: 1.2;
}

// 响应式设计
@media (max-width: 1200px) {
  .form-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .avatar-flex {
    flex-direction: column;
    gap: 20px;
  }
}

.edit-btn-group {
  display: flex;
  gap: 10px;
}
.skyColor {
  color: #2176d2;
}
.readonly-notice {
  margin-bottom: 16px;
}
/* 复制LoginPage.vue上传相关样式 */
.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 40px 0;
}
.upload-tip {
  color: #999;
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}
.file-selected-tip {
  color: #3da890;
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
  font-weight: 500;
}
.md-uploader .el-upload {
  display: block;
  text-align: center;
}
.md-upload-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}
.photo-label {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}
.avatar-uploader .el-upload {
  border: 2px dashed #3da890;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/* 推荐表单样式 */
.recommend-form {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.form-section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.form-section h3 {
  margin: 0 0 20px 0;
  color: #2176d2;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 2px solid #2176d2;
  padding-bottom: 8px;
}

.form-actions {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.form-actions .el-button {
  margin: 0 10px;
  padding: 12px 30px;
  font-size: 16px;
}

/* 表单项居中样式 */
.recommend-form .el-form-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.recommend-form .el-form-item__label {
  text-align: right;
  padding-right: 12px;
  width: 120px;
  flex-shrink: 0;
}

.recommend-form .el-form-item__content {
  display: flex;
  justify-content: center;
  flex: 1;
}

.recommend-form .el-input,
.recommend-form .el-select,
.recommend-form .el-input-number {
  width: 100%;
  max-width: 300px;
}
</style>
